import vue from 'vue'
import { getItem, setItem } from '@/utils/storage'

const MODE_KEY = 'MODE'
// Day、Night、Eyes save

export const modeEums = [
  { code: 'Day', message: 'Day' },
  { code: 'Night', message: 'Night' },
  { code: 'Eyes save', message: 'Eyes save' }
]

export const modeList = ['Day', 'Night', 'Eyes save']

export const state = vue.observable({
  loading: false,
  modeIndex: 0,
  mode: getItem(MODE_KEY) || modeList[0]
})

export const mutations = {
  setLoading(payload) {
    state.loading = payload
  },
  setModeIndex(payload) {
    state.modeIndex = payload % 3
    state.mode = modeList[payload]
    setItem(MODE_KEY, state.mode)
    handleCheckoutMode()
  }
}

export const handleCheckoutMode = (mode = state.mode) => {
  const allLink = document.querySelectorAll('link')
  const links = [...allLink].filter(e => {
    if (e.className && e.className.indexOf('theme-system-variables') > -1) {
      return e
    }
  })

  links.forEach(link => {
    link.disabled = true
  })

  if (mode === 'Day') {
    document.querySelector('#dayLink').disabled = false
  } else if (mode === 'Night') {
    document.querySelector('#nightLink').disabled = false
  } else {
    document.querySelector('#eyesSaveLink').disabled = false
  }
}

handleCheckoutMode()
